<template>
  <div style="display: none;">
    <!-- 这个组件不会显示任何内容 -->
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import router from '../router';

/**
 * 页面预加载组件
 * 自动预加载常用路由页面，提高导航性能
 */

// 常用路由列表，根据项目实际情况调整
const commonRoutes = [
  '/index',
  '/login',
  '/register',
  '/user/profile',
  '/user/cart'
];

// 检测是否为生产环境
const isProduction = ref(
  // 通过检查域名来判断环境，本地开发通常使用localhost
  window.location.hostname !== 'localhost' && 
  window.location.hostname !== '127.0.0.1'
);

// 预加载路由
const prefetchRoute = (path: string) => {
  // 使用setTimeout错开预加载时间，避免同时发起太多请求
  setTimeout(() => {
    const routeConfig = router.resolve(path);
    // 如果路由配置有组件且是函数（懒加载）
    if (routeConfig.matched[0]?.components?.default) {
      try {
        // 触发路由组件的预加载
        if (typeof routeConfig.matched[0].components.default === 'function') {
          (routeConfig.matched[0].components.default as () => Promise<any>)()
            .catch(() => {
              // 忽略加载错误
            });
        }
      } catch (e) {
        // 忽略错误
      }
    }
  }, Math.random() * 2000); // 在0-2秒内随机时间预加载
};

onMounted(() => {
  // 仅在生产环境预加载
  if (isProduction.value) {
    // 延迟执行预加载，让主页面先加载完成
    setTimeout(() => {
      // 预加载常用路由
      commonRoutes.forEach(path => {
        prefetchRoute(path);
      });
    }, 3000); // 页面加载3秒后开始预加载
  }
});
</script> 